<script lang="ts">
export default {
    name: 'CategoryList'
}
</script>

<script setup lang="ts">
import useCategory from '@/composables/cms/category/useCategory';
import useCategoryTable from '@/composables/cms/category/useCategoryTable';
import AddAndEdit from './AddAndEdit.vue';
// 表格的数据获取
const { listParam, categoryTable, getCategoryTable, resetBtn, searchBtn } = useCategoryTable()
// 表格的操作
const { addBtn, editBtn, delBtn, save, addEditRef } = useCategory(getCategoryTable)

</script>
<template>
    <el-main>
        <!-- 新增按钮 -->
        <el-form :inline="true" :model="listParam" class="search">
            <el-form-item label="分类名称">
                <el-input v-model="listParam.name" placeholder="请输入分类名称"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="listParam.status" placeholder="状态">
                    <el-option label="正常" value="1" />
                    <el-option label="停用" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" v-permission="['cms:category:query']" @click="searchBtn">搜索
                </el-button>
                <el-button type="default" icon="Refresh" @click="resetBtn">重置</el-button>
                <el-button type="success" v-permission="['cms:category:add']" icon="Plus" @click="addBtn('')">新增
                </el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :data="categoryTable.list" row-key="id" border lazy stripe default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="id" width="120" label="ID" />
            <el-table-column prop="name" label="分类名称" />
            <el-table-column prop="sort" width="60" label="排序" />
            <el-table-column prop="status" width="80" label="状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.status == '1'">正常</el-tag>
                    <el-tag v-if="scope.row.status == '2'" type="danger">停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250" align="center">
                <template #default="scope">
                    <el-button size="small" type="primary" v-permission="['cms:category:edit']" icon="Edit"
                        @click="editBtn(scope.row)">编辑
                    </el-button>
                    <el-button size="small" type="success" v-permission="['cms:category:add']" icon="Plus"
                        @click="addBtn(scope.row.id)">新增
                    </el-button>
                    <el-button size="small" type="danger" v-permission="['cms:category:delete']" icon="Delete"
                        @click="delBtn(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-main>
    <!-- 新增编辑弹框 -->
    <AddAndEdit ref="addEditRef" @save="save"></AddAndEdit>
</template>
<style lang="scss" scoped>
</style>